<template>
  <div class="fly-screen-container">
    <div class="fly-screen">
      <div class="fly-title">
        可视化大屏
      </div>
      <div class="fly-body">
        <div style="display: flex;height: 100%">
          <div style="width: 40%">
            <ScreenBox :show-title="false" :custom-style="{ height: '60%' }" :svg-size="2" :show-icon="false">
              <div class="screen-map">
                <ScreenMap></ScreenMap>
              </div>
            </ScreenBox>
            <ScreenBox :custom-style="{ height: '40%' }" title="数据列表">
              <div style="width: 100%;padding: 20px;flex-grow: 1">
                <dv-scroll-board :config="tableConfig" style="width:100%;height:100%" />
              </div>
            </ScreenBox>
          </div>

          <div style="width: 60%">
            <ScreenBox :custom-style="{ height: '50%' }" title="直播流">
              <div style="flex-grow: 1;display: flex;flex-direction: column">
                <div style="padding: 10px 20px;display: flex;align-items: center;justify-content: flex-end">
                  <a-select size="small" v-model="rtspLine" style="width: 120px" @change="handleChangeRtspLine">
                    <a-select-option value="1">
                      线路1
                    </a-select-option>
                    <a-select-option value="2">
                      线路2
                    </a-select-option>
                  </a-select>
                </div>
                <div style="flex-grow: 1;display: flex;align-items: center">
                  <div style="width: 50%">
                    <video
                        autoplay="true"
                        muted="false"
                        controls="false"
                        id="elementId"
                        style="width:90%;height:90%">
                    </video>
                  </div>
                  <div style="width: 50%">
                    <video
                        autoplay="true"
                        muted="false"
                        controls="false"
                        id="elementId"
                        style="width:90%;height:90%">
                    </video>
                  </div>
                </div>
              </div>
            </ScreenBox>
            <ScreenBox :custom-style="{ height: '50%' }">
            </ScreenBox>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import mpegts from 'mpegts.js';

export default {
  components: {
    ScreenBox: () => import('./screenBox.vue'),
    ScreenMap: () => import('./ScreenMap.vue')
  },
  data() {
    return {
      // 直播流线路
      rtspLine: '1',
      // 列表数据
      tableConfig: {
        header: ['列1', '列2', '列3'],
        rowNum: 5,
        data: [
          ['行1列1', '行1列2', '行1列3'],
          ['行2列1', '行2列2', '行2列3'],
          ['行3列1', '行3列2', '行3列3'],
          ['行4列1', '行4列2', '行4列3'],
          ['行5列1', '行5列2', '行5列3'],
          ['行6列1', '行6列2', '行6列3'],
          ['行7列1', '行7列2', '行7列3'],
          ['行8列1', '行8列2', '行8列3'],
          ['行9列1', '行9列2', '行9列3'],
          ['行10列1', '行10列2', '行10列3']
        ],
        index: true,
        columnWidth: [50],
        align: ['center']
      }
    }
  },
  mounted() {
    this.initVideo()
  },
  beforeDestroy() {
    this.flvPlayer.destroy();
  },
  methods: {
    // 直播流播放
    initVideo() {
      const ele = document.getElementById('elementId');
      let flvPlayer = mpegts.createPlayer(
          {
            type: 'flv', // 指定媒体类型
            isLive: true, // 开启直播（是否为实时流）
            hasAudio: false, // 关闭声音（如果拉过来的视频流中没有音频一定要把这里设置为fasle，否则无法播放）
            cors: true, // 开启跨域访问
            url: ''// 指定流链接（这里是传递过过来的视频流的地址）
          },
          {
            enableWorker: false, //启用分离的线程进行转换（如果不想看到控制台频繁报错把它设置为false，官方的回答是这个属性还不稳定，所以要测试实时视频流的话设置为true控制台经常报错）
            enableStashBuffer: false, //关闭IO隐藏缓冲区（如果需要最小延迟，则设置为false，此项设置针对直播视频流）
            stashInitialSize: 128, //减少首帧等待时长（针对实时视频流）
            lazyLoad: false, //关闭懒加载模式（针对实时视频流）
            lazyLoadMaxDuration: 0.2, //懒加载的最大时长。单位：秒。建议针对直播：调整为200毫秒
            deferLoadAfterSourceOpen: false, //在MediaSource sourceopen事件触发后加载。在Chrome上，在后台打开的标签页可能不会触发sourceopen事件，除非切换到该标签页。
            liveBufferLatencyChasing: true, //追踪内部缓冲区导致的实时流延迟
            liveBufferLatencyMaxLatency: 1.5, //HTMLMediaElement 中可接受的最大缓冲区延迟（以秒为单位）之前使用flv.js发现延时严重，还有延时累加的问题，而mpegts.js对此做了优化，不需要我们自己设置快进追帧了
            liveBufferLatencyMinRemain: 0.3 //HTMLMediaElement 中可接受的最小缓冲区延迟（以秒为单位）
          }
      )
      flvPlayer.attachMediaElement(ele)
      flvPlayer.load();
      flvPlayer.play();
      this.flvPlayer = flvPlayer
    },
    handleChangeRtspLine() {
    },
    // 销毁
    destory() {
      if (this.flvPlayer) {
        this.flvPlayer.pause;
        this.flvPlayer.unload();
        this.flvPlayer.detachMediaElement();
        this.flvPlayer.destroy();
        this.flvPlayer = null;
      }
    },
  }
}
</script>
<style lang="less">
.fly-screen-container {
  overflow: auto;
  height: 100%;
}
.fly-screen {
  height: 100%;
  background: #04162d;
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 1500px;

  .fly-title {
    height: 70px;
    line-height: 70px;
    text-align: center;
    font-size: 27px;
    color: #fff;
    background-image: url('~@/assets/monitor/title.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    font-family: Microsoft YaHei-Bold, Microsoft YaHei;
    font-weight: 700;
    letter-spacing: 6px;
  }
  .fly-body {
    flex-grow: 1;
    width: 99%;
    margin: 0 auto;
    .screen-map {
      width: 99%;
      height: 100%;
      margin:auto;
      padding-top: 6px;
      position: relative;
      border-top-left-radius: 6px;
      border-top-right-radius: 6px;
      overflow: hidden;
    }
    .el-row {
      height: 100%;
      width: 100%;
      border-radius: 6px;
      .el-col {
        padding: 5px;
      }
    }
  }
}
</style>
